<template>
  <view class="index">
    <view class="top">
      <text class="t1"   @tap="setActive('jd')">接单</text>
      <text class="t2"  @tap="setMap('status', 1)">进行中</text>
	        <text class="t2"  @tap="setMap('status', 4)">已到达</text>
	  <text class="t2"  @tap="setMap('status', 3)">待支付</text>
      <text class="icon" @tap="navigateTo('createOrder')">&#xe60e;</text>
    </view>
    <view class="center" v-if="zst===1" v-for="(v, i) in order.data" :key="i">
		<view class="xtpd" v-if="v.is_system_order===1">
			<view class="aa">
				<view class="dd_info">
					<view class="dd_info1">
			
						<view style="width: 40%;">
							<text class="icon" style="color: #5498F5;">&#xe608;</text>出发地1</view>
						<view class="box123" style="width: 60%;">{{v.start}}</view>
					</view>
					<view class="dd_info2">
						<view style="width: 40%;">
							<text class="icon " style="color: transparent;">&#xe608;</text>两地距离</view>
						<view style="width: 60%;">18.66km</view>
					</view>
					<view class="dd_info3">
						<view style="width: 40%;">
							<text class="icon" style="color: #AFAFAF;">&#xe608;</text>目的地</view>
						<view class="box123" style="width: 60%;">{{v.end}}</view>
					</view>
				</view>
				<view class="person_info">
					<view>系</view>
				</view>
			</view>
			<view class="dd_btn">
				<view class="z_btn"><button>转单</button></view>
				<view class="j_btn" @click="taking(v.id)"><button>接单</button></view>
			</view>
			<view>
				<textarea style="background-color: #E4E4E4;border-radius: 15rpx;width: 96%;padding: 2%;margin-top: 1vh;height: 8vh;" name="" id="" placeholder="订单备注:"></textarea>
			</view>
		</view>
      <view class="orders" v-if="order.total > 0" >
        <!-- <view class="left">
          <view class="input">
            <text class="icon gray">&#xe77c;</text>
            <text class="time">{{ v.createtime | date }}</text>
          </view>
          <view class="input">
            <text class="icon green">&#xe608;</text>
            <text class="address">{{ v.start }}</text>
          </view>
          <view class="input">
            <text class="icon orange">&#xe608;</text>
            <text class="address">{{ v.end }}</text>
          </view>
        </view>
        <view class="right">
          <text class="price">￥{{ v.estimated_price }}元</text>
          <button type="primary" @tap="taking(v.id)">立即接单</button>
        </view> -->
		<view class="qd">
			<view class="bb">
				<view class="qd_info">
					<view class="qd_info1" style="text-align: center;font-size: 14px;"v-if="v.driver_number>1">
						<view style="width: 28%;;">
							订单编号:
						</view>
						
						<view class="" style="font-size: 27rpx;">
							{{ v.order_id }}
						</view>
					</view>
					<view class="qd_info1">
						<view style="width: 10%;position: absolute;top: -0.5vh;">
							<text class="icon" style="color: #5498F5;">&#xe608;</text>
						</view>
						<view style="width: 40%;margin-left: 10%;">
							出发地
						</view>
						<view class="box123" style="width: 50%;">
							{{ v.start }}
						</view>
					</view>
					<view class="qd_info2">
						<view style="width: 40%;margin-left: 10%;">
							两地距离
						</view>
						<view style="width: 50%;">18.66km</view>
					</view>
					<view class="qd_info3">
						<view style="width: 10%;">
							<text class="icon" style="color: #AFAFAF;">&#xe608;</text>
						</view>
						<view style="width: 40%;">
							目的地</view>
						<view class="box123" style="width: 50%;">{{ v.end }}</view>
					</view>
				</view>
				<view class="person_info">
					<view v-if="v.driver_number>1">
						多
					</view>
					<view v-if="v.driver_number==1">
						单
					</view>
				</view>
			</view>
			<view class="q_btn" @click="taking(v.id)"><button>抢单</button></view>
		</view>
      </view>
      <!-- <view class="empty" v-if="order.total == 0">暂无订单</view> -->
    </view>
	<view class="center" v-if="zst===2"  v-for="(v, i) in driverorder.data" :key="i">
		<view class="xtpd" v-if="v.is_system_order===1">
			<view class="aa">
				<view class="dd_info">
					<view class="dd_info1">
			
						<view style="width: 40%;">
							<text class="icon" style="color: #5498F5;">&#xe608;</text>出发地</view>
						<view class="box123" style="width: 60%;">{{v.start}}</view>
					</view>
					<view class="dd_info2">
						<view style="width: 40%;">
							<text class="icon " style="color: transparent;">&#xe608;</text>两地距离</view>
						<view style="width: 60%;">18.66km</view>
					</view>
					<view class="dd_info3">
						<view style="width: 40%;">
							<text class="icon" style="color: #AFAFAF;">&#xe608;</text>目的地</view>
						<view class="box123" style="width: 60%;">{{v.end}}</view>
					</view>
				</view>
				<view class="person_info">
					<view>
						系
					</view>
					
				</view>
			</view>
			<view class="dd_btn">
				<view class="z_btn"><button>转单</button></view>
				<view class="j_btn"@tap="navigateTo('/pages/myDriving/drivingDetails?order_id=' + v.id)"><button>接单</button></view>
			</view>
			
		</view>
		<view class="orders">
			
		
	 <view class="qd">
	 	<view class="bb">
	 		<view class="qd_info">
				
	 			<view class="qd_info1">
	 				<view style="width: 10%;position: absolute;top: -0.5vh;">
	 					<text class="icon" style="color: #5498F5;">&#xe608;</text>
	 				</view>
	 				<view style="width: 40%;margin-left: 10%;">
	 					出发地
	 				</view>
	 				<view class="box123" style="width: 50%;">
	 					{{ v.start }}
	 				</view>
	 			</view>
	 			<view class="qd_info2">
	 				<view style="width: 40%;margin-left: 10%;">
	 					两地距离
	 				</view>
	 				<view style="width: 50%;">18.66km</view>
	 			</view>
	 			<view class="qd_info3">
	 				<view style="width: 10%;">
	 					<text class="icon" style="color: #AFAFAF;">&#xe608;</text>
	 				</view>
	 				<view style="width: 40%;">
	 					目的地</view>
	 				<view class="box123" style="width: 50%;">{{ v.end }}</view>
	 			</view>
	 		</view>
	 		<view class="person_info">
	 			<view v-if="v.driver_number>1">
	 				多
	 			</view>
	 			<view v-if="v.driver_number==1">
	 				单
	 			</view>
	 		</view>
	 	</view>
	 	<view class="q_btn" @tap="navigateTo('/pages/myDriving/drivingDetails?order_id=' + v.id)"><button>点击查看</button></view>
	 </view>
	 </view>
	  <!-- <view class="empty" v-if="order.total == 0">暂无订单</view> -->
	</view>

    <!-- <view class="center1" v-show="active == 'dj'"><rich-text :nodes="setting.notice"></rich-text></view> -->
 <!--   <view class="bottom">
      <view class="item active" @tap="navigateTo('/pages/myDriving/myDriving')">
        <text class="icon">&#xe606;</text>
        首页
      </view>
      <view class="item " @tap="navigateTo('/pages/myDriving/order')">
        <text class="icon">&#xe616;</text>
        订单
      </view>
      <view class="item " @tap="navigateTo('/pages/myDriving/withdraw')">
        <text class="icon">&#xe61c;</text>
        提现
      </view>
    </view> -->
  </view>
</template>

<script>
import helper from '../../common/helper.js';
import api from '../../common/api.js';
let timer = null;
export default {
  data() {
    return {
      active: 'jd',
      setting: {},
	  
      map: {
        page: 1,
		status:"all",
      },
	  zst:1,
      order: {},
	  driverorder:{},
    };
  },
  onLoad() {
    this.getInfo();
  },
  onShow() {
    this.getList();
    timer = setInterval(() => {
      this.getList();
    }, 3000);
  },
  onHide() {
    clearInterval(timer);
  },
  filters: {
    date: value => {
      let date = new Date(value * 1000);
      let h = date.getHours();
      let m = date.getMinutes();
      return (h > 9 ? h : '0' + h) + ':' + (m > 9 ? m : '0' + m);
    }
  },
  methods: {
	  setMap(key, value) {
		  this.zst=2
		  
	    this.map[key] = value;
	    this.map.page = 1;
		 this.getdriveorder()
		// this.setActive("dj")
	  
	  },
    async taking(orderId) {
      uni.showModal({
        title: '操作提示',
        content: '确定要接单吗？',
        success: async e => {
          if (e.confirm) {
            let res = await api.orderTaking(orderId);
            helper.toast(res.msg);
            if (res.code == 1) {
              uni.navigateTo({
                url: '/pages/myDriving/drivingDetails?order_id=' + orderId
              });
            }
          }
        }
      });
    },
    async getInfo() {
      let res = await api.getSetting();
      this.setting = res.data;
    },
	async getdriveorder() {
	  let res = await api.getOrderList(this.map);
	  this.driverorder = res.data;
	  uni.stopPullDownRefresh();
	},
    async getList() {
      let res = await api.getOrderTakingList(this.map);
      this.order = res.data;
      uni.stopPullDownRefresh();
    },
    onPullDownRefresh() {
      this.map.page = 1;
      this.getList();
    },
    onReachBottom() {
      if (this.info.last_page > this.info.current_page) {
        this.getList();
      }
    },
    setActive(active) {
		this.zst=1
      this.active = active;
	  this.getList()
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    }
  }
};
</script>

<style lang="scss" scoped>
	.xtpd{
		width: 90%;
		border-radius: 15rpx;
		height: 31vh;
		// DDCADE C4DAEC
		background:linear-gradient(#DDCADE ,#C4DAEC );
		box-shadow: 1px 1px 1px 1px #eaeaea;
		margin-bottom: 25rpx;
		padding: 5%;
	}
	.qd{
		width: 90%;
		border-radius: 15rpx;
		height: 20vh;
		// DDCADE C4DAEC
		background-color: white;
		box-shadow: 1px 1px 1px 1px #eaeaea;
		margin-bottom: 25rpx;
		padding: 5%;
	}
	.dd_info{
		float: left;
		width: 80%;
	}
	.qd_info{
		float: left;
		width: 80%;
	}
	.person_info{
		width: 20%;
		text-align: center;
		float: left;
		view{
			margin: auto;
			color: white;
			width: 5vh;
			height: 5vh;
			line-height: 5vh;
			background-color: #F2632C;
			border-radius: 50%;
		}
		
	}
	.aa{
		width: 100%;
		height: 14vh;
	}
	.bb{
		width: 100%;
		height: 15vh;
	}
	.dd_info1{
		font-size: 45rpx;
		font-weight: 800;
		width: 100%;
		height: 6vh;
		view{
			float: left;
		}
	}
	.qd_info1{
		height: 4vh;
		position: relative;
		font-size: 35rpx;
		font-weight: 800;
		width: 100%;
		view{
			height: 100%;
			float: left;
		}
	}
	.dd_info2{
		height: 4vh;
		width: 100%;
		view{
			float: left;
			font-size: 30rpx;
		}
	}
	.box123{
				width:220rpx;
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow:ellipsis;
	}
	.dd_info3{
		width: 100%;
		view{
			float: left;
			font-size: 30rpx;
		}
	}
	.qd_info2{
		margin-top: 1vh;
		position: relative;
		width: 100%;
		height: 3vh;
		view{
			float: left;
			font-size: 30rpx;
		}
	}
	.qd_info3{
		margin-top: 1vh;
		position: relative;
		height: 3vh;
		width: 100%;
		view{
			font-size: 30rpx;
			height: 4vh;
			line-height: 4vh;
			float: left;
		}
	}
	.dd_btn{
		width: 100%;
		height: 7vh;
		border-bottom: 1px solid #AFAFAF;
	}
	.z_btn{
		float: left;
		width: 27.5%;
		margin-right: 2.5%;
		button{
			width: 100%;
			height: 5vh;
			line-height: 5vh;
			border: 0;
			background-color: #FE973A;
			color: white;
			border-radius: 10rpx;
			font-size: 35rpx;
		}
	}
	.q_btn{
		width: 100%;
		button{
			line-height: 5vh;
			font-size: 35rpx;
			width: 100%;
			height: 5vh;
			border: 0;
			background-color: #FA4F50;
			color: white;
			border-radius: 10rpx;
		}
	}
	.j_btn{
		margin-left: 2.5%;
		float: left;
		width: 67.5%;
		button{
			line-height: 5vh;
			font-size: 35rpx;
			width: 100%;
			height: 5vh;
			border: 0;
			background-color: #07C160;
			color: white;
			border-radius: 10rpx;
		}
	}
	.active {
	  color: #32c45e !important;
	  .icon {
	    color: #32c45e !important;
	  }
	}
.empty {
  height: 100upx;
  line-height: 100upx;
  font-size: 26upx;
  text-align: center;
}
page,
.index {
  height: 100%;
  background-color: #fbfbfb;
}
.center {
  padding: 30upx;
}
.center1 {
  padding: 30upx;
  font-size: 26upx;
  line-height: 48upx;
}
.top {
  display: flex;
  padding: 20upx;
  font-size: 28upx;
  background-color: #ffffff;
 
  .t1 {
    width: 48%;
    text-align: center;
  }
  .t2 {
    width: 48%;
    text-align: center;
  }
  .icon {
    font-size: 30upx;
  }
}
.orders {
  // margin-bottom: 30upx;
  display: flex;
  // padding: 20upx 10upx;
  // padding-right: 20upx;
  border-radius: 10upx;
  // box-shadow: 1px 1px 1px 1px #eaeaea;
  align-items: center;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  // background-color: #ffffff;
  .icon {
    text-align: center;
    font-size: 56upx;
  }
  .left {
    width: 80%;
    .input {
      width: 100%;
      padding: 6upx 0;
      display: flex;
      align-items: center;
      text {
        width: 20%;
      }
      .time {
        width: 70%;
        font-size: 25upx;
        color: #979797;
      }
      .address {
        width: 70%;
        font-size: 26upx;
      }
    }
  }
  .right {
    width: 20%;
    text-align: right;
    font-size: 34upx;
    color: #e51c23;
    button {
      float: right;
      width: 140upx;
      background-color: #32c45e;
      margin-top: 20upx;
      border-radius: 50upx;
      padding: 0 10upx;
      font-size: 22upx;
    }
    .price {
      float: right;
      position: relative;
      right: 20upx;
      font-size: 28rpx;
      width: 250upx;
    }
  }
}

.bottom {
  background-color: #ffffff;
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 120upx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24upx;
    width: 33.33%;
    .icon {
      font-size: 56upx;
      color: #999999;
    }
  }
}
// .active {
//   color: #32c45e !important;
//   .icon {
//     color: #32c45e !important;
//   }
// }
</style>
